<script lang="ts" setup>
import { reactive } from 'vue'
import CoverMark from '@/components/cover-mark/coverMark.vue'
import { getArtistMv } from '@/api/artist'
import type { Mv } from '@/types/artist/index'

const props = defineProps<{ id: number }>()

const state = reactive({
  page: 1,
  limit: 20,
  haveMore: false,
  isLoading: false,
  mvs: [] as Mv[],
})

const getMv = async () => {
  const params = {
    limit: state.limit,
    offset: (state.page - 1) * state.limit,
    id: props.id,
  }
  state.isLoading = true
  const { data } = await getArtistMv(params)
  state.isLoading = false
  if (data.code !== 200) return ElMessage.error('获取失败')
  const { hasMore, mvs } = data
  state.haveMore = hasMore
  state.mvs = mvs
}
getMv()

const loadMore = () => {
  state.page++
  getMv()
}
</script>

<template>
  <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5 text-xs">
    <div v-for="item in state.mvs" :key="item.id">
      <CoverMark :pic-url="item.imgurl16v9" :play-count="item.playCount" video :show-count="true" />
      <div class="pt-2 truncate">{{ item.name }}</div>
    </div>
  </div>

  <div class="text-center" v-if="state.haveMore">
    <el-button class="mx-auto" type="success" link @click="loadMore" v-loading="state.isLoading"> 加载更多 </el-button>
  </div>
</template>

<style lang="less" scoped></style>
